<template>
  <div class="register">
    <div class="title">
      <i class="iconfont icon-fa-angle-right" :class="{'vs':isWeixin}" @click="go"></i>
    </div>
   <div class="content">
     <h2>你好，</h2>
     <p>欢迎注册华晟天弘</p>
          <div class="input-item">
            <input type="number" name="phone" v-model="user.phone" placeholder="请输入手机号"/>
          </div>
     <div class="input-item">
       <input :type="pwdType" name="password" v-model="user.password" placeholder="请输入密码"/>
       <i v-if="pwdType === 'password'" class="iconfont icon-yanjing_bi" @click="pwdType='text'"></i>
       <i  v-if="pwdType === 'text'" class="iconfont icon-yanjing-zheng" @click="pwdType='password'"></i>
     </div>
       <div class="input-item">
         <input type="text" @input="inputVCode" name="code" v-model="user.code" placeholder="请输入验证码"/>
         <span v-if="!isShowTime" :class="{'es':this.user.phone.trim()}" @click="getVCode">获取验证码</span>
         <span class="time" v-else>{{time}}s</span>
       </div>
     <div class="item clearfix">
       <label for="personal" :class="{'is-checked':user.user_type==1}" @click="user.user_type=1"><i></i><input class="radio" hidden
                                                                                             type="radio"
                                                                                             v-model="user.user_type"
                                                                                             name="user_type"
                                                                                             id="personal"
                                                                                             value="1"/>个人</label>
       <label for="company" :class="{'is-checked':user.user_type==2}"  @click="user.user_type=2"><i></i><input class="radio" hidden
                                                                                            type="radio"
                                                                                            v-model="user.user_type"
                                                                                            name="user_type"
                                                                                            id="company" value="2"/>企业</label>
     </div>
     <button class="btn" :disabled="!isSubmit" @click.prevent="submit" :class="{'es': isSubmit}">注册</button>
   </div>
    <router-link tag="span" class="go" to="/login">已有账号，去登录</router-link>
  </div>
</template>

<script>
  import CONFIG from './../../config'
  import { Toast } from 'mint-ui';
  import {isMobile} from "../../util";

  export default {
    name: "Register",
    data() {
      return {
        pwdType:'password',
        user: {
          phone: '',
          code: '',
          user_type:1,
          password:''
        },
        isShowTime: false,
        captcha1: {},
        interval: {},
        isRequest: false,
        time: 120,
      }
    },
    mounted() {
      this.captcha1 = new TencentCaptcha(CONFIG.appId, this.handleVCode);
    },
    computed: {
      isSubmit() {
        return this.user.phone.trim() && this.user.code.trim()
      }
    },
    methods: {
      go(){
        this.$router.go(-1)
      },
      inputVCode() {
        if (!this.isShowTime) {
          this.$toast('请先获取验证码');
          this.user.code = '';
        }
      },
    getVCode() {
      if (this.user.phone.trim() === '') return;
      if (!isMobile(this.user.phone)) {
        this.$toast('手机号格式不正确');
      } else {
        this.captcha1.show()
      }
    },
    handleVCode(res) {
      if (res.ret === 0) {
        this.$api.sendMsg({
          phone: this.user.phone,
          ticket: res.ticket,
          randstr: res.randstr,
          template: 'reg'
        }).then((res) => {
          this.interval = setInterval(() => {
            this.time -= 1;
            if (this.time === 0) {
              clearInterval(this.interval);
              this.isShowTime = false;
              this.time = 120;
            }
          }, 1000);
          this.isShowTime = true;
        }).catch((err) => {
          this.$msg(err,this.$toast);
        })
      }
    },
    submit(){
      if (this.user.password.trim().length < 6) {
        this.$toast('密码不小于6位');
        return;
      }
      this.$api.register(this.user).then((res) => {
        this.$toast('恭喜你，注册成功');
        this.$router.push('/login')
      }).catch((err) => {
        this.$msg(err,this.$toast);
      })
    },
  }
  }
</script>

<style lang="scss" scoped>
.register{
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;
  .title{
    height: 88px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span{
      font-size:30px;
      font-weight:400;
      color:rgba(51,51,51,1);
    }
    i{
      font-size: 30px;
      line-height: 30px;
      &.vs{
        visibility: hidden;
      }
    }
  }
  .content{
    padding: 0 65px;
    >h2{
      font-size:72px;
      font-weight:500;
      color:rgba(0,0,0,1);
      line-height: 72px;
      margin: 66px 0 0 0;
    }
    >p{
      font-size:30px;
      font-weight:400;
      line-height: 30px;
      color:rgba(204,204,204,1);
      margin: 27px 0 94px 0;
    }
    .input-item{
      height: 100px;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .iconfont{
        font-size: 40px;
        color: #333333;
      }
      input{
        font-size: 30px;
        line-height: 30px;
        color: #999999;
        text-align: left;
      }
      >span{
        font-size: 30px;
        line-height: 30px;
        color: #999999;
        &.es{
          color: #E71F18;
        }
        &.time{
          margin: 0 30px 0 0;
        }
      }
    }
    .item {
      margin: 35px 0 93px 0;
      position: relative;
      label {
        width: auto;
        font-size: 30px;
        line-height: 30px;
        color: #999999;
        margin: 0 59px 0 0;
        display: flex;
        align-items: center;
        float: left;
        &.is-checked {
          > i {
            background-color: #E71F18;
            border: none;
            &:after {
              transform: translate(-50%, -50%) scale(1);
            }
          }
        }
        > i {
          width: 30px;
          height: 30px;
          border: 1px solid rgba(204, 204, 204, 1);
          border-radius: 50%;
          background-color: #fff;
          margin: 0 10px 0 0;
          position: relative;
          cursor: pointer;
          display: inline-block;
          box-sizing: border-box;
          &:after {
            width: 10px;
            height:10px;
            background-color: #fff;
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform .15s ease-in;
          }
        }
      }
      > span {
        width: 100px;
        height: 58px;
        text-align: center;
        line-height: 58px;
        right: 18px;
        position: absolute;
        top: 0;
        font-weight: 400;
        color: rgba(231, 31, 24, 1);
        cursor: pointer;
      }
    }
    >a{
      float: right;
      font-size:30px;
      line-height: 30px;
      font-weight:400;
      color:rgba(51,51,51,1);
      margin: 30px 0 90px 0;
    }
    .btn{
      width: 100%;
      height:88px;
      border-radius:6px;
      display: block;
      margin: 0 auto;
      font-size:36px;
      font-weight:400;
      background: #ddd;
      color:rgba(255,255,255,1);
      &.es{
        background:rgba(231,31,24,1);
      }
    }
  }
  .go{
    font-size:24px;
    line-height: 24px;
    font-weight:400;
    width: 100%;
    text-align: center;
    color:rgba(153,153,153,1);
    display: block;
    position: absolute;
    bottom:90px;
    left: 0;
  }
}
</style>
